<script lang="ts" setup>
import { reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import * as axios from "axios";
import Editor from "@tinymce/tinymce-vue";
import qs from "qs";

const router = useRouter();
const route = useRoute();

interface FormData {
  id?: string | string[];
  title: string;
  description: string;
  content: string;
}
console.log(route.query);

const formData = reactive<FormData>({
  id: route.query.id,
  title: "新建一个文章",
  description: "描述dadada",
  content: "内容内容123~~~~~~~~",
});

const onFinish = (values: any) => {
  addArticle();
};
const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
async function addArticle() {
  const token = await localStorage.getItem("token");
  const res = await axios.post("http://localhost:8090/blog/edit", formData, {
    headers: {
      "Content-type": "application/json;charset=utf-8",
      token: token,
    },
  });

  console.log(res);
  if (res.data.code == 0) {
  }
}
</script>

<template>
  <a-form
    :model="formData"
    name="basic"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item
      label="标题"
      name="title"
      :rules="[{ required: true, message: '请输入标题!' }]"
    >
      <a-input v-model:value="formData.title" />
    </a-form-item>

    <a-form-item
      label="描述"
      name="description"
      :rules="[{ required: true, message: '请输入描述!' }]"
    >
      <a-input v-model:value="formData.description" />
    </a-form-item>

    <a-form-item
      label="正文"
      name="content"
      :rules="[{ required: true, message: '请输入正文!' }]"
    >
      <!-- <a-textarea
        v-model:value="formData.content"
        show-count
        :maxlength="140"
      /> -->
      <editor
        api-key="no-api-key"
        v-model="formData.content"
        :init="{
          height: 500,
          menubar: false,
          plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount',
          ],
          toolbar:
            'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help',
        }"
      />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<style scoped></style>
